
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">

.yui3-progressbar {
	width:200px;
	height:20px;
}

.yui3-progressbar .yui3-progressbar-label {
	position:absolute;
	font-size:11px;
	top: 4px;
	left: 5px;
	z-index: 3;
}

.yui3-progressbar .yui3-progressbar-content {
	position:relative;
	width:200px;
	height:20px;
	background:url('assets/active.gif') left center no-repeat;
	z-index: 1;
}

.yui3-progressbar .yui3-progressbar-slider {
	position:absolute;
	width:200px;
	height:20px;
	top: 0px;
	left: 0px;
	background:url('assets/background.gif') left center no-repeat;
	z-index: 2;
}

#selectFilesLink #selectLink,
#uploadFilesLink #uploadLink {
    color: #00c;
    text-decoration: underline;
}
</style>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</h1>

<div class="exampleIntro">
	<p>In this example, the Uploader is used to send multiple files to the server and monitor
   their upload progress with individual progress bars. The example also demonstrates the 
   use of the transparent overlay "Browse" button for the Uploader.</p>
   
<p><strong>Please note:</strong> This example will not work when run from a local filesystem because Flash only allows ExternalInterface communication with pages loaded from the network. If you’d like to run this example locally, set up a local web server and launch it from there. </p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="uploaderContainer"> 
	<div id="uploaderOverlay" style="position:absolute; z-index:2"></div> 
	<div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div> 
</div> 
<div id="uploadFilesLink"><a id="uploadLink" href="#">Upload Files</a></div>

<div id="files">
  <table id="filenames" style="border-width:1px; border-style:solid; padding:5px;">
	<tr><td>Filename</td><td>File size</td><td>Percent uploaded</td></tr>
  </table>	
</div>
<script>


YUI({ filter: 'raw' },{gallery: 'gallery-2010.06.30-19-54'}).use("uploader", 'gallery-progressbar', function(Y) {
	
var uploader;

function init () {
	
var overlayRegion = Y.one("#selectLink").get('region');
Y.log(overlayRegion);
Y.one("#uploaderOverlay").set("offsetWidth", overlayRegion.width);
Y.one("#uploaderOverlay").set("offsetHeight", overlayRegion.height);

uploader = new Y.Uploader({boundingBox:"#uploaderOverlay"});	

uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);
}

Y.on("domready", init);


var setupUploader = function (event) {
	uploader.set("multiFiles", true);
	uploader.set("simLimit", 3);
	uploader.set("log", true);
	
	var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
	                   {description:"Videos", extensions:"*.avi;*.mov;*.mpg"}); 
	
    uploader.set("fileFilters", fileFilters); 
}

var fileSelect = function (event) {
	Y.log("File was selected, parsing...");
	var fileData = event.fileList;	

	for (var key in fileData) {
		var output = "<tr><td>" + fileData[key].name + "</td><td>" + fileData[key].size + "</td><td><div id='div_" + fileData[key].id + "'></div></td></tr>\n";
		Y.one("#filenames").append(output);
		
		var progressBar = new Y.ProgressBar({id:"pb_" + fileData[key].id, layout : '<div class="{labelClass}"></div><div class="{sliderClass}"></div>'});
		progressBar.render("#div_" + fileData[key].id);
		progressBar.set("progress", 0);
	}
}

var updateProgress = function (event) {
	var pb = Y.Widget.getByNode("#pb_" + event.id);
	pb.set("progress", Math.round(100 * event.bytesLoaded / event.bytesTotal));
}

var uploadComplete = function (event) {
	var pb = Y.Widget.getByNode("#pb_" + event.id);
	pb.set("progress", 100);
}

var uploadFile = function (event) {
	uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
}

Y.one("#uploadFilesLink").on("click", uploadFile);



});

</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
